<template>
  <div id="producerProducts">
    <topBar></topBar>

    <div class="container my-5">
      <div
        class="
          row
          p-4
          pb-0
          pe-lg-0
          pt-lg-5
          align-items-center
          rounded-3
          border
          shadow-lg
        "
      >
        <section class="pt-4 pb-0 card-grid">
          <div class="container">
            <div class="row g-4">
              <!-- Left big card -->
              <div class="col-lg-6">
                <div id="he-plugin-standard"></div>
                <br /><br />
                <h1>今日产品详情</h1>
              </div>
              <!-- Right small cards -->
              <div class="col-lg-6">
                <div class="row g-4">
                  <!-- Card item START -->
                  <div class="col-12">
                    <div
                      class="
                        card card-overlay-bottom card-grid-sm card-bg-scale
                      "
                      style="
                        background-image: url(static/img/1.jpg);
                        background-position: center left;
                        background-size: cover;
                      "
                    >
                      <!-- Card Image -->
                      <!-- Card Image overlay -->
                      <div
                        class="
                          card-img-overlay
                          d-flex
                          align-items-center
                          p-3 p-sm-4
                        "
                      >
                        <div class="w-100 mt-auto">
                          <!-- Card category -->
                          <a href="#" class="badge bg-warning mb-2">Today</a>
                          <!-- Card title -->
                          <h1 class="text-white">
                            <label class="btn-link stretched-link text-reset">{{
                              today
                            }}</label>
                          </h1>
                          <!-- Card info -->
                          <ul
                            class="
                              nav nav-divider
                              text-white-force
                              align-items-center
                              d-none d-sm-inline-block
                            "
                          >
                            <li class="nav-item position-relative">
                              <div class="nav-link">
                                <lable
                                  class="stretched-link text-reset btn-link"
                                  >农历：{{ nongli }}</lable
                                >
                              </div>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- Card item END -->
                </div>
              </div>
            </div>
          </div>

          <br />
        </section>
        <hr />

        <vegetable></vegetable>
        <hr />
        <fruit></fruit>
        <hr />
        <EggsAndMeat></EggsAndMeat>
        <hr />
        <nuts></nuts>
        <hr />
        <fungus></fungus>
        <hr />
        <GrainOilCrops></GrainOilCrops>
        <hr />
      </div>
    </div>
  </div>
</template>

<script>
import topBar from "@/components/util/topBar";
import vegetable from "@/components/species/vegetable";
import fruit from "@/components/species/fruit";
import EggsAndMeat from "@/components/species/EggsAndMeat";
import nuts from "@/components/species/nuts";
import fungus from "@/components/species/fungus";
import GrainOilCrops from "@/components/species/GrainOilCrops";
export default {
  data() {
    return {
      today: "2021",
      nongli: "2021",
    };
  },
  components: {
    topBar: topBar,
    vegetable: vegetable,
    fruit: fruit,
    EggsAndMeat: EggsAndMeat,
    nuts: nuts,
    fungus: fungus,
    GrainOilCrops: GrainOilCrops,
  },
  created() {
    window.WIDGET = {
      CONFIG: {
        layout: "1",
        width: "450",
        height: "150",
        background: "1",
        dataColor: "FFFFFF",
        borderRadius: "7",
        key: "465d273674104300a125afcae56c08b7",
      },
    };
    const s = document.createElement("script");
    s.type = "text/javascript";
    s.src =
      "https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0";
    document.body.appendChild(s);

    var date = new Date();
    this.today = date.toLocaleDateString();

    this.nongli = new Date()
      .toLocaleDateString("zh-CN-u-ca-chinese")
      .replace(
        /(\d+)\s*?年/,
        (_, y) =>
          "甲乙丙丁戊己庚辛壬癸".charAt((y - 4) % 10) +
          "子丑寅卯辰巳午未申酉戌亥".charAt((y - 4) % 12)
      );
  },
};
</script>

<style scoped>
@import url("../../../static/css/style.css");
</style>